<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Hello Qunee</title>
    <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
    <link rel=stylesheet href=src/css/graph.editor.css>
</head>
<body class="layout">
<div id="top" style="background-color: #FEE;" data-options="region:'north',height:'100'">top</div>
<div id="left" style="background-color: #EEF;" data-options="region:'west',width:'100'">left</div>
<div id="editor" data-options="region:'center'"></div>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/layout.border.js"></script>
<!-- endbuild -->
<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<script src="src/common/PropertyPane.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->
<script>

    Q.registerImage('lamp', Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -8, -8, 16, 16));
    var lampGradient = new Q.Gradient(Q.Consts.GRADIENT_TYPE_RADIAL, [Q.toColor(0xAAFFFFFF), Q.toColor(0x33EEEEEE), Q.toColor(0x44888888), Q.toColor(0x33666666)],
            [0.1, 0.3, 0.7, 0.9], 0, -0.2, -0.2);

    function createLampStyles(color) {
        var styles = {};
        styles[Q.Styles.SHAPE_FILL_COLOR] = color;
        styles[Q.Styles.SHAPE_STROKE] = 0.5;
        styles[Q.Styles.SHAPE_STROKE_STYLE] = '#CCC';
        styles[Q.Styles.LABEL_BACKGROUND_COLOR] = '#FF0';
        styles[Q.Styles.SHAPE_FILL_COLOR] = color;
        styles[Q.Styles.LABEL_SIZE] = {width: 100, height: 20};
        styles[Q.Styles.LABEL_PADDING] = 5;
        styles[Q.Styles.LABEL_OFFSET_Y] = -10;
        styles[Q.Styles.SHAPE_FILL_GRADIENT] = lampGradient;
        styles[Q.Styles.LABEL_POSITION] = Q.Position.CENTER_TOP;
        styles[Q.Styles.LABEL_ANCHOR_POSITION] = Q.Position.LEFT_BOTTOM;
        return styles;
    }
    $('#editor').graphEditor({images: [{name: 'SVG', images: ['data/images/logo.svg', {
        image: 'lamp',
        properties: {
            name: 'Message'
        },
        styles: createLampStyles('#F00')
    }]}], callback: function(editor){
        var graph = editor.graph;
        var hello = graph.createNode("Hello", -100, -50);
        hello.image = Q.Graphs.server;
        var qunee = graph.createNode("Qunee", 100, 50);
        var edge = graph.createEdge("Hello\nQunee", hello, qunee);
        graph.moveToCenter();
    }});
</script>
</body>
</html>